<template>
  <div class="home-header">
		<div class="position" @click="goPage('addressList')">
			<!-- 点击跳转至收货地址列表 -->
			<svg-icon icon-class="address" color="#333333"></svg-icon>
			<div class="address-text">{{address}}</div>
		</div>
		<div class="message">
			<!-- 点击跳转至 消息列表 -->
				<svg-icon icon-class="notic" color="#333333"></svg-icon>
		</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
	props:['address'],
  setup(props, context) {
		const router = useRouter()
		console.log(props.address)
		if(props.address){

		}
		let address = ref(props.address?props.address:"张扬路55弄123号202室")
		const goPage = (pageName:string)=>{
			router.push({
        path: pageName || '/'
      })
		}
    return {
			address,
			goPage
    }
  },
})
</script>
<style lang="scss">
@import '@/styles/viriables.scss';
@import '@/styles/mixins.scss';
.home-header {
  display: flex;
  padding: 0 18px;
	margin: 16px 0;
	align-items: center;
	justify-content: space-between;
	.position{
		display: flex;
	}
	.address-text{
		font-size: 16px;
		color: $content-font-color;
		margin-left: 8px;
		width: 300px;
		@include ellipsis(1);
	}
}
</style>
